<script setup>

import {ref, defineEmits, defineProps} from 'vue'
import ThreeImages from '@/components/common/ThreeImages.vue'
import StepTitleDescription from '@/components/common/StepTitleDescription.vue'

const stepTitleDescription = ref({
  title: 'Step 6',
  description: 'What kind of finished look would you like for your drapes?\n' +
    'Choose fullness based on that.'
});

const fullnessStyles = ref([
  {
    title: '2X FULLNESS',
    description: 'Nicely gathered with soft fold on top. 2x Fullness strongly recommended.',
    image: 'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A10.svg?v=1745722200'
  },
  {
    title: '1.5X FULLNESS',
    description: 'Not recommended for windows beyond 50 inches wide to avoid drapes looking flat.',
    image: 'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A11.svg?v=1745722230'
  },
  {
    title: 'NO FULLNESS',
    description: 'Will get a flat sheet like look when kept drawn in.',
    image: 'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A12.svg?v=1745722264'
  },
])

const emit = defineEmits('selected')

const selected = (selected) => {
  emit('selected', selected)
}

</script>

<template>

  <StepTitleDescription :title-and-description="stepTitleDescription" />

  <ThreeImages :curtain-styles="fullnessStyles" @selected="selected" />

</template>

<style scoped>

</style>